﻿@{
    Layout = null;
}
<!DOCTYPE html>

<html style="height:100%">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>分类目录</title>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/jqueryEasyui/js")
    @Styles.Render("~/jqueryEasyui/css")
    <script type="text/javascript">
        $(function () {

            //只绘制TreeGrid , TreeGrid的数据在Combobox数据加载完成后，初始化选择项目时onSelect中执行，
            $('#tg').treegrid({
                //url: 'Index.aspx?fun=GetClass',
                idField: 'ID',
                treeField: 'Name',
                fit: true,
                columns: [[
                        { title: '分类名称', field: 'Name', width: 350 },
                        { title: '深度', field: 'Depth', width: 80, align: 'center' },
                        { title: '操作', field: 'Tools', width: 180, align: 'center' }
                ]]
            });

            //分类类型 数据加载
            $("#iptClsType").combobox({
                valueField: 'ID',
                textField: 'Name',
                url: '/adminweb/catalog/GetClassType',
                onSelect: ClsType_onSelect,
                onLoadSuccess: function () {
                    $("#iptClsType").combobox("select", $("#iptClsType").combobox('getData')[0].ID)
                }
            });
        });

        //分类选择事件重新加载列表中数据
        var ClsType_onSelect = function (rec) {
            //重新加载数据
            if (rec != undefined && rec != null) {
                $('#tg').treegrid({ url: "/adminweb/catalog/GetClass?type=" + rec.ID });
            } else {
                $('#tg').treegrid("reload");
            }

        }
    </script>
</head>
<body style="height:100%">
    <div class="easyui-layout" style="height: 98%">
        <div data-options="region:'north',border:false" style="height: 30px">
            <span>分类类型：</span><input id="iptClsType" class="easyui-combobox" />
        </div>
        <div data-options="region:'center',border:false">
            <table id="tg" class="easyui-treegrid">
        </table>

        </div>
    </div>
</body>
</html>
